<%--
  Created by IntelliJ IDEA.
  User: zhaoliwen
  Date: 2020/4/17
  Time: 21:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>欢迎注册EasyMall</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/regist.css"/>
    <%--引入jquery--%>
    <script src="${pageContext.request.contextPath}/js/jquery-1.4.2.js"></script>
    <script>
        $(function () {
            $("#valiimg").click(function () {
                $(this).attr("src","${pageContext.request.contextPath}/user/valiimg.do?a="+Math.random());
            });

            //失去焦点提示
            $("input[name='username']").blur(function () {
                $(this).nextAll("span").html("");
                if($(this).val().trim()==""){
                    $(this).nextAll("span").html("用户名不能为空！").css("color","red");
                    return;
                }
                //ajax校验
                var username=$(this).val();
                $.post("${pageContext.request.contextPath}/user/ajaxCheckUser.do",{"username":username},function (result) {
                    $("#checkUserName").html("<font color='#a52a2a'>"+result+"</font>")
                    //  $(this).nextAll("span").html(result).css("#a52a2a","red");
                })
            });
            $("input[name='password']").blur(function () {
                $(this).nextAll("span").html("");
                if($(this).val().trim()==""){
                    $(this).nextAll("span").html("密码不能为空！").css("color","red");
                }
            });
            $("input[name='password2']").blur(function () {
                $(this).nextAll("span").html("");
                if($(this).val().trim()==""){
                    $(this).nextAll("span").html("确认密码不能为空！").css("color","red");
                }
                if($(this).val().trim()!=""&&$(this).val().trim()!=$("input[name='password']").val().trim()){
                    $(this).nextAll("span").html("两次密码不一致 ！").css("color","red");
                }
            });
            $("input[name='nickname']").blur(function () {
                $(this).nextAll("span").html("");
                if($(this).val().trim()==""){
                    $(this).nextAll("span").html("昵称不能为空！").css("color","red");
                }
            });

            $("input[name='email']").blur(function () {
                $(this).nextAll("span").html("");
                if($(this).val().trim()==""){
                    $(this).nextAll("span").html("邮箱不能为空！").css("color","red");
                }

                //邮箱格视校验
                var reg=/^\w+@(.\w+)+$/;
                if($(this).val()!=""&&!$(this).val().match(reg)){
                    $(this).nextAll("span").html("邮箱格式错误！").css("color","red");
                }
            });


            $("input[name='valistr']").blur(function () {
                if($(this).val().trim()==""){
                    $(this).nextAll("span").html("验证码不能为空！").css("color","red");
                    flag = false;

                }
            })
        });

        function checkForm() {
            //获取数据
            var username=$("input[name='username']").val();
            var password=$("input[name='password']").val();
            var password2=$("input[name='password2']").val();
            var nickname=$("input[name='nickname']").val();
            var email=$("input[name='email']").val();
            var valistr=$("input[name='valistr']").val();
            //非空校验
            //提示错误之前先清空
            $("span").html("");
            //定义一个开关
            var flag=true;
            if(username.trim()==""){
                $("input[name='username']").nextAll("span").html("用户名不能为空！").css("color","red");
                flag = false;

            }
            if(password.trim()==""){
                $("input[name='password']").nextAll("span").html("密码不能为空！").css("color","red");
                flag = false;

            }
            if(password2.trim()==""){
                $("input[name='password2']").nextAll("span").html("重复密码不能为空！").css("color","red");
                flag = false;

            }
            if(nickname.trim()==""){
                $("input[name='nickname']").nextAll("span").html("昵称不能为空！").css("color","red");
                flag = false;

            }
            if(email.trim()==""){
                $("input[name='email']").nextAll("span").html("邮箱不能为空！").css("color","red");
                flag = false;

            }
            if(valistr.trim()==""){
                $("input[name='valistr']").nextAll("span").html("验证码不能为空！").css("color","red");
                flag = false;

            }
            //密码是否一致校验
            if(password2!=""&&password.trim()!=password2.trim()){
                $("input[name='password2']").nextAll("span").html("两次输入的密码不一致！").css("color","red");
                flag = false;
            }
            //邮箱校验
            var reg=/^\w+@(.\w+)+$/;
            if(email!=""&&!email.match(reg)){
                $("input[name='email']").nextAll("span").html("邮箱格式错误！").css("color","red");
                flag = false;
            }
            return flag;
        }
    </script>
</head>
<body>
<form onsubmit="return checkForm()" action="${pageContext.request.contextPath}/user/doRegist.do" method="POST">
    <h1>欢迎注册EasyMall</h1>

    <table>
        <tr>
            <td class="tds" colspan="2" style="color: red;text-align: center">
               ${msg}
            </td>
        </tr>
        <tr>
            <td class="tds">用户名：</td>
            <td>
                <input type="text" name="username" value="${param.username}"/>
                <span id="checkUserName"></span>
            </td>
        </tr>
        <tr>
            <td class="tds">密码：</td>
            <td>
                <input type="password" name="password" value="${param.password}"/>
                <span></span>
            </td>
        </tr>
        <tr>
            <td class="tds">确认密码：</td>
            <td>
                <input type="password" name="password2"/>
                <span></span>
            </td>
        </tr>
        <tr>
            <td class="tds">昵称：</td>
            <td>
                <input type="text" name="nickname" value="${param.nickname}"/>
                <span></span>
            </td>
        </tr>
        <tr>
            <td class="tds">邮箱：</td>
            <td>
                <input type="text" name="email" value="${param.email}"/>
                <span></span>
            </td>
        </tr>
        <tr>
            <td class="tds">验证码：</td>
            <td>
                <input type="text" name="valistr"/>
                <img id="valiimg" src="${pageContext.request.contextPath}/user/valiimg.do" width="" height="" alt=""  />
                <span></span>
            </td>
        </tr>
        <tr>
            <td class="sub_td" colspan="2" class="tds">
                <input type="submit" value="注册用户"/>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

